const loadChannels = async () => {
  if (!props.deviceId) {
    console.warn('设备ID为空，无法加载通道列表')
    return
  }

  loading.value = true
  try {
    console.log('🔄 开始加载通道列表，设备ID:', props.deviceId)
    
    // 使用 refreshChannelsByDevice 接口获取最新数据
    const response = await channelApi.refreshChannelsByDevice(props.deviceId)
    
    console.log('📥 接收到响应数据:', response)
    
    // 确保响应数据是数组
    if (Array.isArray(response)) {
      channels.value = response
      console.log('✅ 通道数据加载成功，数量:', channels.value.length)
      
      // 打印每个通道的关键信息用于调试
      channels.value.forEach((channel, index) => {
        console.log(`通道 ${index + 1}:`, {
          id: channel.id,
          name: channel.name,
          channelNo: channel.channelNo,
          status: channel.status,
          enabled: channel.enabled
        })
      })
    } else {
      console.error('❌ 响应数据格式错误，期望数组，实际收到:', typeof response, response)
      channels.value = []
      ElMessage.error('通道数据格式错误')
    }
  } catch (error) {
    console.error('❌ 加载通道列表失败:', error)
    channels.value = []
    ElMessage.error('加载通道列表失败: ' + (error.message || error))
  } finally {
    loading.value = false
  }
}

const refreshChannels = async () => {
  if (!props.deviceId) {
    ElMessage.warning('请先选择设备')
    return
  }

  refreshing.value = true
  try {
    console.log('🔄 开始刷新通道列表，设备ID:', props.deviceId)
    
    const response = await channelApi.refreshChannelsByDevice(props.deviceId)
    
    console.log('📥 刷新响应数据:', response)
    
    // 确保响应数据是数组
    if (Array.isArray(response)) {
      channels.value = response
      console.log('✅ 通道刷新成功，数量:', channels.value.length)
      ElMessage.success(`刷新成功，共获取到 ${channels.value.length} 个通道`)
    } else {
      console.error('❌ 刷新响应数据格式错误，期望数组，实际收到:', typeof response, response)
      ElMessage.error('刷新数据格式错误')
    }
  } catch (error) {
    console.error('❌ 刷新通道列表失败:', error)
    ElMessage.error('刷新失败: ' + (error.message || error))
  } finally {
    refreshing.value = false
  }
}

// 格式化通道状态显示
const formatChannelStatus = (status) => {
  if (!status) return '未知'
  
  const statusMap = {
    'ACTIVE': '活跃',
    'INACTIVE': '非活跃', 
    'ERROR': '错误'
  }
  
  return statusMap[status] || status
}

// 获取状态对应的标签类型
const getStatusTagType = (status) => {
  const typeMap = {
    'ACTIVE': 'success',
    'INACTIVE': 'warning',
    'ERROR': 'danger'
  }
  
  return typeMap[status] || 'info'
}

<!-- 状态列优化 -->
<el-table-column prop="status" label="状态" width="100" align="center">
  <template #default="{ row }">
    <el-tag :type="getStatusTagType(row.status)" size="small">
      {{ formatChannelStatus(row.status) }}
    </el-tag>
  </template>
</el-table-column>

<!-- 启用状态列优化 -->
<el-table-column prop="enabled" label="启用" width="80" align="center">
  <template #default="{ row }">
    <el-tag :type="row.enabled ? 'success' : 'danger'" size="small">
      {{ row.enabled ? '是' : '否' }}
    </el-tag>
  </template>
</el-table-column>